@import "../../common/settings/color-set.styl"

for i in range(1, 40, 1)
  .bdt{i}-1px
    position relative
    &::before
      display: block
      position absolute
      content: ''
      width 100%
      height 0
      border-top 1px solid color+i
      top 0
      left 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleY(.5)
        transform: scaleY(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleY(.333)
        transform: scaleY(.333)

  .bdb{i}-1px
    position relative
    &::after
      display: block
      position absolute
      content: ''
      width 100%
      height 0
      border-bottom 1px solid color+i
      bottom 0
      left 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleY(.5)
        transform: scaleY(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleY(.333)
        transform: scaleY(.333)

  .bdl{i}-1px
    position relative
    &::before
      display: block
      position absolute
      content: ''
      width 0
      height 100%
      border-left 1px solid color+i
      top 0
      left 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleX(.5)
        transform: scaleX(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleX(.333)
        transform: scaleX(.333)

  .bdr{i}-1px
    position relative
    &::after
      display: block
      position absolute
      content: ''
      width 0
      height 100%
      border-right 1px solid color+i
      top 0
      right 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleX(.5)
        transform: scaleX(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleX(.333)
        transform: scaleX(.333)

  .bdlr{i}-1px
    position relative
    &::before
      display: block
      position absolute
      content: ''
      width 0
      height 100%
      border-left 1px solid color+i
      top 0
      left 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleX(.5)
        transform: scaleX(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleX(.333)
        transform: scaleX(.333)
    &::after
      display: block
      position absolute
      content: ''
      width 0
      height 100%
      border-right 1px solid color+i
      top 0
      right 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleX(.5)
        transform: scaleX(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleX(.333)
        transform: scaleX(.333)

  .bdtb{i}-1px
    position relative
    &::before
      display: block
      position absolute
      content: ''
      width 100%
      height 0
      border-top 1px solid color+i
      top 0
      left 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleY(.5)
        transform: scaleY(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleY(.333)
        transform: scaleY(.333)
    &::after
      display: block
      position absolute
      content: ''
      width 100%
      height 0
      border-bottom 1px solid color+i
      bottom 0
      left 0
      @media (min-resolution:2dpx)
        -webkit-transform: scaleY(.5)
        transform: scaleY(.5)
      @media (min-resolution:3dpx)
        -webkit-transform: scaleY(.333)
        transform: scaleY(.333)

.bdl-1px-none, .bdt-1px-none
  &::before
    display: none
.bdr-1px-none, .bdb-1px-none
  &::after
    display: none
.bdlr-1px-none, .bdtb-1px-none
  &::before
    display: none
  &::after
    display: none
